<template>
  <div class="bznaming-page">
    <div class="stepBox s1">
      <div class="crumbs_nav">
        <p>当前位置：<a href="/">首页</a> > <a href="void:javascript(0)">测算五行八字</a></p>
      </div>
      <h1 class="stepTle">五行八字测算</h1>
      <div class="form_box">
        <cell
          title="出生日期 (公历)"
          is-link
          @click.native="dateChoose()"
          :value="dateValue"
        ></cell>
        <datetime
          format="HH"
          v-model="timeValue"
          title="出生时间 (小时)"
          aria-placeholder="选择"
          @on-confirm="onConfirm"
        ></datetime>
        <calendar
          v-model="dataSelect.calendarShow"
          :default-date="dataSelect.defaultDate"
          @change="datachange_func"
        >
        </calendar>
        <x-button
          type="default"
          class="step_btn"
          @click.native="start_naming()"
        >开始测算五行八字</x-button>
      </div>
    </div>
  </div>
</template>
<script>
import { XInput, XButton, Datetime, PopupRadio, Cell } from "vux";
import g from "../common/js/http.js";

// Vue.use(Calendar)
export default {
  data() {
    return {
      timeValue: "12",
      sexSelected: "男",
      dataSelect: {
        calendarShow: false,
        defaultDate: new Date()
      },
      dateValue: dateFormat(new Date(), "yyyy-MM-dd")
    };
  },
  components: {
    XInput,
    XButton,
    Datetime,
    PopupRadio,
    Cell
  },
  methods: {
    dateChoose() {
      this.dataSelect.calendarShow = !this.dataSelect.calendarShow;
    },
    onConfirm(val) {
      console.log("on-confirm arg", val);
      console.log("current value", this.value1);
    },
    datachange_func(date, formatDate) {
      console.log(formatDate);
      this.dateValue = formatDate;
      this.dataSelect.selectedDate = formatDate;
    },
    start_naming() {
      var data_s = this.dateValue;
      var time_s = this.timeValue;
      if (data_s == "") {
        alert("出生日期不能为空");
        return;
      } else if (time_s == "") {
        alert("出生时间不能为空");
        return;
      }
      var req_data = {
        date_s: data_s,
        time_s: time_s
      };
      var _this = this;
      this.$router.push({
        path: "/bztest_result",
        query: {
          date_s: data_s,
          time_s: time_s
        }
      });
    }
  }
};
function dateFormat(date, fmt) {
  var o = {
    "M+": date.getMonth() + 1,
    "d+": date.getDate()
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
}
</script>
<style scoped>
.sex_selected {
  border: 1px solid red;
}
.sex_item {
  padding: 10px;
}

.step_btn {
  background: #fbb03b;
  width: 170px;
  height: 40px;
  box-shadow: 5px 5px 5px #ccc;
  color: #fff;
  font-size: 99%;
  margin-top: 30px;
}
.form_box {
  width: 90%;
  margin: auto;
  background: #ffffff;
  padding: 16px 16px 120px 16px;
}
.form_box .weui-label {
  text-align: left !important;
}
.weui-cell {
  margin: 16px 0;
}
</style>

